import React from "react";
import { navigate } from "gatsby";
import { List, InputItem, Button, TextareaItem } from "antd-mobile";
import { createForm } from "rc-form";

let moneyKeyboardWrapProps;
// 通过自定义 moneyKeyboardWrapProps 修复虚拟键盘滚动穿透问题
if (typeof document !== "undefined") {
  const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
    window.navigator.userAgent
  );
 
  if (isIPhone) {
    moneyKeyboardWrapProps = {
      onTouchStart: e => e.preventDefault()
    };
  }
}

const Item = List.Item;

class AddBind extends React.Component {
  state = {
    value: 1
  };
  onSubmit = () => {
    this.props.form.validateFields({ force: true }, error => {
      if (!error) {
        console.log(this.props.form.getFieldsValue());
      } else {
        alert("Validation failed");
      }
    });
  };
  onReset = () => {
    this.props.form.resetFields();
  };

  validateAccount = (rule, value, callback) => {
    if (value && value.length > 4) {
      callback();
    } else {
      callback(new Error("At least four characters for account"));
    }
  };

  render() {
    const { getFieldProps, getFieldError } = this.props.form;

    return (
      <form>
        <List
          className="clearfix add-list"
          renderFooter={() =>
            getFieldError("account") && getFieldError("account").join(",")
          }
        >
          <InputItem
            {...getFieldProps("name", {
              rules: [
                { required: true, message: "设备名称" },
                { validator: this.validateAccount }
              ]
            })}
            error={!!getFieldError("name")}
            placeholder="请选择设备"
            editable={false}
            onErrorClick={() => {
              alert(getFieldError("name").join("、"));
            }}
            arrow="horizontal"
            onClick={ () => navigate('/binding/device-list')}
            extra={<i className="icon iconfont">&#xe610;</i>}
          >
            设备名称:
          </InputItem>
          <InputItem
            {...getFieldProps("id", {
              rules: [
                { required: true, message: "手动输入或扫码" },
                { validator: this.validateAccount }
              ]
            })}
            clear
            error={!!getFieldError("id")}
            onErrorClick={() => {
              alert(getFieldError("id").join("、"));
            }}
            placeholder="手动输入或扫码"
            extra={<i className="icon iconfont">&#xe647;</i>}
          >
            传感器ID:
          </InputItem>
          <InputItem
            className="water-range1"
            {...getFieldProps("money2", {
              normalize: (v, prev) => {
                if (v && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(v)) {
                  if (v === ".") {
                    return "0.";
                  }
                  return prev;
                }
                return v;
              }
            })}
            type="money"
            placeholder=""
            ref={el => (this.inputRef = el)}
            onVirtualKeyboardConfirm={v =>
              console.log("onVirtualKeyboardConfirm:", v)
            }
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >
            压力范围:
          </InputItem>
          <InputItem
            className="water-range2"
            {...getFieldProps("money2", {
              normalize: (v, prev) => {
                if (v && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(v)) {
                  if (v === ".") {
                    return "0.";
                  }
                  return prev;
                }
                return v;
              }
            })}
            type="money"
            placeholder=""
            extra="(MPa)"
            ref={el => (this.inputRef = el)}
            moneyKeyboardAlign="left"
            onVirtualKeyboardConfirm={v =>
              console.log("onVirtualKeyboardConfirm:", v)
            }
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >
            -
          </InputItem>
          <InputItem
            {...getFieldProps("id", {
              rules: [
                { required: true, message: "手动输入或扫码" },
                { validator: this.validateAccount }
              ]
            })}
            clear
            error={!!getFieldError("id")}
            onErrorClick={() => {
              alert(getFieldError("id").join("、"));
            }}
            placeholder="手动输入或扫码"
            extra={<i className="icon iconfont">&#xe605;</i>}
          >
            传感器ID:
          </InputItem>
          <TextareaItem
            {...getFieldProps('note3')}
            className="location"
            title="详细位置:"
            autoHeight
            labelNumber={5}
          />
        </List>
        <Button type="primary">绑定并继续</Button>
        <style>{`
        .water-range1 {
            width: calc(50% - 15px);
            float:left;
        }
        .water-range2 {
            width: calc(50% - 15px);
            float:left;
        }
        .water-range2.am-list-item .am-input-label.am-input-label-5 {
            width: auto;
            margin-right: 30px;
        }
        .location .am-textarea-control {
            border: 1px solid #eee;
            margin: 10px;
            padding: 5px;
            min-height: 75px;
        }
        .add-list {
            margin-bottom:12rem;
        }
        .am-list-item .am-input-label,
        .am-textarea-label,
        .am-list-item .am-input-control input,
        .am-textarea-control textarea {
            font-size: 1.2rem;
        }
        .am-list-item .am-input-extra {
            font-size: 1.5rem;
            color: #2d77fc;
        }
      `}</style>
      </form>
    );
  }
}

const AddBindForm = createForm()(AddBind);
export default AddBindForm;
